<template>
  <view class="ver-layout">
    <image class="goods-image" mode="scaleToFill" :src="goodsInfo.image"></image>
    <view class="goods-content">
      <view class="hor-layout-side-center">
        <view class="goods-title">{{ goodsInfo.name }}</view>
        <view class="goods-sales">浏览量：{{ goodsInfo.view }}</view>
      </view>
      <view class="hor-layout-side-center" style="margin-top: 17px">
        <view class="goods-score">{{ goodsInfo.points }}签到积分</view>
        <view class="goods-color">{{ goodsInfo.description }}</view>
      </view>
      <view class="hor-layout-side-center" style="margin-top: 19px">
        <view class="goods-title-second">商品原件</view>
        <view class="goods-title-second">{{ goodsInfo.price }}</view>
      </view>
      <view class="hor-layout-side-center" style="margin-top: 19px">
        <view class="goods-title-second">剩余库存</view>
        <view class="goods-title-second">{{ goodsInfo.storage }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import {GoodsManageApi} from "@/api/goodsManage.js"

let engine = new GoodsManageApi()

export default {
  name: "goodsDetail",
  data() {
    return {
      goodsObj: {},
      goodsInfo: {}
    }
  },
  onLoad(options) {
    this.goodsObj = options
    this.getGoodsDetail()
  },
  methods: {
    getGoodsDetail() {
      engine.getGoodsDetail(this.goodsObj.id).then(res => {
        this.goodsInfo = res.data
      })
    }
  }
}
</script>

<style>
page {
  background: #F2F2F2;
}

.goods-content {
  width: 100%;
  padding: 18px 12px;
  background: #FFFFFF;
}

.goods-image {
  width: 100%;
  height: 200px;
}

.goods-title {
  font-size: 16px;
  color: #3C3C3C;
}

.goods-sales {
  font-size: 12px;
  color: #8B8B8B;
}

.goods-score {
  font-size: 16px;
  color: #F94C20;
}

.goods-color {
  font-size: 14px;
  color: #3C3C3C;
}

.goods-title-second {
  font-size: 14px;
  color: #333333;
}
</style>
